<!DOCTYPE html>
<html th:replace="layout/layout"
      xmlns:th="http://www.thymeleaf.org">
<title th:fragment="titleName">首页</title>
<style th:fragment="styles">
    #chartDiv, #container {
        height: 320px;
        width: 100%;
        overflow: hidden;
    }

</style>
<div th:fragment="content">

    <div class="wrapper wrapper-content">

        <div class="row  border-bottom white-bg dashboard-header">
            <div class="col-lg-3">
                <h2>本月情况</h2>
                <!--<small>商家/单数/成功数</small>-->
                <ul class="list-group clear-list m-t">
                    <li class="list-group-item fist-item">
                    <span class="pull-right" id="today_num_value">
                      <div class="stat-percent font-bold text-danger" id="total"></div>
                    </span>
                        <span class="label label-info">1</span> 商户数
                    </li>

                    <li class="list-group-item">
                    <span class="pull-right"  id="today_pay_value">
                      <div class="stat-percent font-bold text-danger" id="duetotal"></div>
                    </span>
                        <span class="label label-warning">2</span> 欠费商户数
                    </li>
                    <li class="list-group-item">
                    <span class="pull-right"  id="today_successbfb_value">
                     <div class="stat-percent font-bold text-danger"  id="feetotal"></div>
                    </span>
                        <span class="label label-success">3</span> 缴费商户数
                    </li>
                </ul>
            </div>
            <div class="col-lg-9" >

                <div class="panel panel-info">
                    <div class="panel-heading">
                        <i class="fa fa-info-circle"></i> 欠费信息

                    </div>

                    <div class="panel-body">
                        <div class="jqGrid_wrapper">
                            <table class="table table-striped table-bordered table-hover " id="tableList" >
                            </table>
                        </div>
                    </div>
                </div>

            </div>
        </div>

        <div class="row  border-bottom white-bg dashboard-header">
            <div class="col-lg-12" >

                <div class="panel panel-info">
                    <div class="panel-heading">
                        <i class="fa fa-info-circle"></i> 缴费情况
                    </div>

                    <div class="panel-body">
                        <div id="chartDiv">
                            <div class="flot-chart m-b-xl">
                                <div id="container" class="flot-chart-content"></div>
                            </div>
                        </div>

                    </div>

                </div>

            </div>
        </div>


    </div>



</div>
<div th:fragment="scriptRef">
    <script th:src="@{/js/home/home.js}"></script>
    <script th:src="@{/js/lib/echart/echarts.min.js}"></script>
</div>
<script th:fragment="scripts" type="text/javascript">
    Home.init();
    //画柱状图
    //   Maps("line", myChart, '{value}');


</script>
</html>